<template>
  <div class="nav-bar">
    <div class="page-tmp-tip info" :class="pageTipShow?'animated slideInDown':'dn'">{{pageTipShow}}</div>
    <div class="bar-buttong">
      <div class="buttong-button" @click="$router.push({name:'sys-theme'})" >
        <i class="iconfont el-icon-back"></i>
        <span>返回</span>
      </div>
      <div class="buttong-button" @click="onHandlerSave" >
        <i class="iconfont icon-save"></i>
        <span>保存</span>
      </div>
       <div class="buttong-button" @click="saveAsProgram()">
        <i class="iconfont icon-save-as"></i>
        <span>另存为</span>
      </div>
      <div class="buttong-button" :class="{'disabled': !canReduceScale}" @click="updateScale('-')">
        <i class="el-icon-zoom-out"></i>
        <span>缩小</span>
      </div>
      <div class="buttong-button" :class="{'disabled': !canPlusScale}" @click="updateScale('+')">
        <i class="el-icon-zoom-in"></i>
        <span>放大</span>
      </div>
    </div>
    <div class="bar-preview">
      <el-button type="info" plain @click="onShowPreview(true)">预览</el-button>
      <el-button type="primary" @click="handlerPublish()">一键发布</el-button>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
import editPanelMixin from '@/mixins/edit-pannel-mixin';
export default {
  computed: {
    ...mapState('programs', ['pageTipShow', 'scaleValue', 'scenes', 'pageData']),
    ...mapGetters('programs', ['canPlusScale', 'canReduceScale', 'currScene'])
  },
  mixins: [editPanelMixin],
  methods: {
    ...mapMutations('programs', ['setPageTipShow', 'setScaleValue', 'setShowPreview']),
    ...mapActions('programs', ['saveProgram', 'saveAsProgram']),
    updateScale (type) {
      const { scaleValue, canPlusScale, canReduceScale } = this
      if ((type === '+' && !canPlusScale) ||
      (type === '-' && !canReduceScale)) {
        return
      }
      let val = type === '+' ? scaleValue + 0.25 : scaleValue - 0.25
      this.setScaleValue(val)
      this.$nextTick(() => {
        this.setPageTipShow(`当前比例：${parseFloat(val * 100).toFixed(0)}%`)
        setTimeout(() => {
          this.setPageTipShow('')
        }, 1000)
      })
    },
    onShowPreview(msg) {
      console.log('msg'+msg)
      // save
      this.saveProgram(msg).then(() => {
        this.setShowPreview(true)
      })
    },
    handlerPublish(){
      this.$router.push({path: '/publish-add', query:{...this.pageData,channel:'QuickPublish'}});
    },
    onHandlerSave(){
      let scenesName = false;
      let that = this;
      that.scenes.forEach(function(item){
        for(let ii=0; ii<that.scenes.length; ii++){
          if(item.name === that.scenes[ii].name && item.uuid !== that.scenes[ii].uuid){
            scenesName = true;
          }
        }
      })
      if(scenesName){
        that.$message.error("场景名重复，保存失败！",5);
        return false;
      }
      if(that.currScene.elements){
        that.currScene.elements.forEach(function(item,index){
          if( item.elName === 'sxc-image' ){
            if(item.propsValue && item.propsValue.imageSrcList){
              that.currScene.elements[index].propsValue.imageSrcList.map( res => {
                if(res.switchType){
                  res.animateInfo = res.animateInfoAll
                  return { ...res }
                }
              })
            }

          }
        })
      }
      if(that.pageData===1){
        that.onRequestScenesSave({ cmd: 'save' })
      }else{
        that.saveProgram();
      }

    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/scss/variables";
</style>
